<template>
<view>
<!--pages/shop_new/scanBuyLocate/scanBuyLocate.wxml-->
<view class="search-wrapper  fixed">
  <view class="search-box ">
    <text class="iconfont icon-sousuo"></text> 
    <input :placeholder="placeholder" placeholder-style="color:#999;" :value="store_name" confirm-type="search" @input="input" @confirm="input" />
    <text class="iconfont icon-cha1" :hidden="store_name == ''" @tap="clearInput"></text>
  </view>
  <view class="btn" @tap="input"><lang keywords="搜索"></lang></view>
</view>
<view class="list">
  <view class="item border-b" v-for="(item, index) in list" :key="index" @tap="selectStore" :data-index="index">
    <view class="img" style="width:68px;height:48px;"><image :src="item.image" mode="aspectFill"></image></view>
    <view class="info">
      <view>{{item.name}}</view>
      <view class="address">{{item.adress}}</view>
    </view>
    <view class="distance">
      <text>{{item.range}}</text>
      <text class="iconfont icon-dingwei2"></text>
    </view>
  </view>
</view>

<view :hidden="!pageLoading"><lang keywords="加载中"></lang></view>
<view :hidden="!pageComplete"><lang keywords="我也是有底线的..."></lang></view>

<view class="empty" :hidden="!showEmpty">
  <image src="../../../static/images/sn_searchnull.png" mode="widthFix"></image>
  <view><lang keywords="暂未搜索到结果"></lang></view>
</view>


<!-- 支付跳转弹层 -->
<view class="mask" :hidden="!showMask">
  <view class="maskContent">
    <view class="content">
      <view class="title"><lang keywords="请确认您所处的位置为当前店铺"></lang></view>
      <view class="item">
        <view class="img"><image :src="list[store_index].image" mode="aspectFit"></image></view>
        <view class="info">
          <view>{{list[store_index].name}}</view>
          <view class="address">{{list[store_index].adress}}</view>
        </view>
      </view>
    </view>
    <view class="maskbtn_box">
      <view class="btn" @tap="closeMask"><lang keywords="重新选择"></lang></view> 
      <view class="btn confirm" @tap="confirm"><lang keywords="确认"></lang></view> 
    </view>
  </view>
</view>



</view>
</template>

<script>
import common from '../../../utils/common.js'
var app = getApp();
var _this;
const getStoreList = () => {
  var param = {
    only_one: 0,
    lng: '',
    lat: '',
    page: _this.pageIndex,
    key: _this.store_name
  };
  var address = app.globalData.delivery_address;
  if (address) {
      param.lng = address.lng;
      param.lat = address.lat;
      common.post('Shop_new&a=near_offline_shop', param, data => {
        if (data) {
          if (_this.pageIndex === 1) {
            _this.list = [];
          }

          _this.setData({
            list: _this.list.concat(data.shop_list)
          });

          if (_this.list.length === 0) {
            _this.showEmpty = true
          } else {
            _this.showEmpty = false
          }

          if (data.has_more) {
            _this.pageLoading = true,
            _this.pageIndex = _this.pageIndex + 1
          } else {
            _this.pageLoading = false
          }
        }
      });
    }
};

export default {
  data() {
    return {
      showMask: false,
      showEmpty: false,
      pageLoading: false,
      pageComplete: false,
      pageIndex: 1,
      store_name: '',
      list: [],
      store_index: 0,
      // 被选中的店铺 
      timer: '',
      placeholder: '请输入店铺名称'
    };
  },

  onReachBottom() {
    if (_this.pageLoading) {
      getStoreList();
    }
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    _this = this;
    common.setMainColor(_this);
	wx.setNavigationBarTitle({
        title: common.changeTxt('自助购-店铺定位')
	});
	_this.setData({
        placeholder: common.changeTxt('请输入店铺名称')
	});
	// 获取店铺列表
    getStoreList();
  },
  components: {},
  props: {},
  methods: {
    // 输入
    input(e) {
      clearTimeout(_this.timer);

      _this.store_name = e.detail.value
        _this.pageIndex = 1
        _this.pageLoading = false
        _this.pageComplete = false

      _this.timer = setTimeout(() => {
        getStoreList();
      }, 500);
    },

    // 点击叉号清除输入
    clearInput() {
        _this.store_name = ''
        _this.pageIndex = 1
        _this.pageLoading = false
        _this.pageComplete = false

      getStoreList();
    },

    // 选择店铺
    selectStore(e) {
        _this.store_index = e.currentTarget.dataset.index
        _this.showMask = true
    },

    // 确认选择的店铺
    confirm() {
      var pages = getCurrentPages();
      var Page = pages[pages.length - 1]; //当前页

      if (pages.length > 1) {
        //说明有上一页存在
        //上一个页面实例对象
        var prePage = pages[pages.length - 2];

        if (prePage.store.store_id != _this.list[_this.store_index].store_id) {
          prePage.refresh = 0;
          prePage.store = _this.list[_this.store_index];
          prePage.store = _this.list[_this.store_index]
        }
      }

      wx.navigateBack({
        delta: 1
      });

      _this.showMask = false
    },

    // 关闭弹窗
    closeMask() {
      _this.showMask = false
    },
  }
};
</script>
<style>
/* pages/shop_new/scanBuyLocate/scanBuyLocate.css */
.border-b::after{content: '';position: absolute;bottom: 0;left: 65px;height: 1rpx;width: 100%;background: #efefef;transform: scaleY(0.5);}
page{width: 100%;height: 100%;background: #fff;position: relative;}

.search-wrapper{padding:10px;display: flex;background: #fff;}
.search-wrapper.fixed{position: fixed;top: 0;left: 0;right: 0;z-index: 9;}
.search-wrapper .search-box{background: #f5f5f5;border-radius: 5rpx;font-size: 15px;color: #333;display: flex;align-items: center;padding: 10px 0 10px 10px;box-sizing: border-box;height: 35px;flex: 1;}
.search-wrapper .search-box input{flex: 1}
.search-wrapper .search-box .icon-sousuo{margin-right: 10rpx;color: #999;font-size: 15px;}
.search-wrapper .search-box .icon-cha1{color: #999;padding: 20rpx;}
.search-wrapper .btn{font-size: 15px;color: #06c1ae;height: 35px;line-height: 35px;margin-left: 10px;}

.list{padding-top: 45px;}
.item{position: relative;width: 100%;padding:12px 10px;display: flex;align-items: center;box-sizing: border-box;}
.item .img{width: 45px;height: 45px;flex-shrink: 0;}
.item .img image{width: 100%;height: 100%;}
.item .info{padding: 0 10px;font-size: 14px;width: calc(100% - 165px);}
.item .info .address{font-size: 12px;color: #999;margin-top: 5px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}
.item .distance{width: 100px;color: #999;font-size: 12px;text-align: right;}

.mask{position: fixed;bottom: 0;left: 0;width: 100%;height: 100%;z-index: 99;background: rgba(0, 0, 0, .4);}
.maskContent{position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 75%;background: #fff;border-radius: 10rpx;overflow: hidden;}
.maskContent .content .title{font-size: 16px;padding-top: 15px;text-align: center;font-weight: bold;color: #333;}
.maskContent .content .item{padding: 15px;}
.maskContent .content .item .info{width: calc(100% - 65px);padding-right: 0;color: #333;font-size: 14px;}
.maskbtn_box{display: flex;border-top: 1rpx solid #ddd}
.maskbtn_box .btn{flex: 1;font-size: 16px;line-height: 2.5;text-align: center;color: #999;background: #fff;padding: 0;margin: 0;border-radius: none;}
.maskbtn_box .btn::after{border: none;border-radius: none;}
.maskbtn_box .confirm{color: #04b7a5;border-left: 1rpx solid #ddd;}

.empty{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);text-align: center;color: #333;font-size: 15px;}
.empty image{width: 130px;}
</style>